<template>
  <el-menu
    class="side-bar"
    :uniqueOpened="true"
    :router="true"
    background-color="#333"
    :default-active="defaultActive"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
   <el-menu-item index="dashboard">
     <i class="el-icon-s-platform"></i>
        全局监控
   </el-menu-item>
    <el-submenu index="2">
      <template #title>
        <i class="el-icon-position"></i>
        监控页
      </template>
      <el-menu-item index="global">全局监控</el-menu-item>
      <el-menu-item index="service">服务监控</el-menu-item>
      <el-menu-item index="user">用户行为</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const defaultActive = ref(location.pathname.split('/')[1]);
    return {defaultActive};
  },
});
</script>

<style lang="scss" scoped>
.side-bar {
  height: 100vh;
  .dashboard {
    padding: 18px 0;
    color: #fff;
    font-size: 18px;
    padding-left: 20px;
  }
}
</style>
